<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--顶部-->
    <MainHeader :searchRepair="true" :hasreturn="true" :doSearch="doSearch"/>

    <mu-flex fill class="full" ref="container">
      <div class="loadmore-content">
        <div class="empty" v-if="allRepairs.length <= 0">
          无任何报修记录
        </div>
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list style="padding: 5px 2px;">
            <template v-for="(rp, i) in allRepairs">
              <mu-paper :z-depth="2" style="margin-bottom: 5px">
                <mu-list-item avatar style="padding: 8px 0;">
                  <mu-list-item-content>
                    <mu-list-item-title>{{rp.name}}：{{rp.tel}}</mu-list-item-title>
                    <mu-list-item-sub-title>{{rp.explains}}</mu-list-item-sub-title>
                  </mu-list-item-content>
                  <mu-list-item-action>
                    <mu-badge :content="rp.status" color="primary"></mu-badge>
                    <mu-list-item-after-text style="font-size: 10px;">2019-05-20 22:10</mu-list-item-after-text>
                  </mu-list-item-action>
                </mu-list-item>
              </mu-paper>
            </template>
          </mu-list>
        </mu-load-more>
      </div>
    </mu-flex>
  </mu-flex>
</template>

<script>
  import MainHeader from '../components/MainHeader'
  import {mapMutations, mapState, mapActions} from 'vuex'

  export default {
    name: "RepairSquare",
    components: {
      MainHeader
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.showNav(false)
      })
    },
    beforeRouteLeave(to, from, next) {
      this.showNav(true);
      next()
    },
    data() {
      return {
        refreshing: false,
        loading: false,
        page: 1
      }
    },
    computed: {
      ...mapState(['searchRepairKey', 'allRepairs'])
    },
    methods: {
      ...mapMutations(['showNav']),
      ...mapActions(['loadAllRepair']),
      refresh() {
        let self = this;
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        this.loadAllRepair(1).then(()=> {
          self.refreshing = false
        })
      },
      load() {
        let self = this;
        this.loading = true;
        this.loadAllRepair(++this.page).then(() => {
          self.loading = false
        })
      },
      doSearch () { // 进行搜索
        console.log(this.searchRepairKey)
      }
    },
    created () {
      this.loadAllRepair(this.page)
    }
  }
</script>

<style scoped>
  .loadmore-content {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 56px);
    overflow: auto;
  }
</style>
